<template>
  <view class="account-chooser" v-show="show">
    <view class="nothing">

    </view>
    <view class="account-detail">
      <view class="account-header-fixed">
        <view class="account-header">
          <view class="left">

          </view>
          <view class="header-title">
            选择关联的账户
          </view>
          <view class="close" @click="close" >
            x
          </view>
        </view>
      </view>
      <ul>
        <li @click="finishChoose({name:'不关联账户'})">
          <div class="account-item">
            <view :class="'box-border'+ ($store.state.account.accountInfo.name!=='不关联账户'?'':' box-border-choose' )">
              <view class="left-side">
                <view class="icon-box">
                  <svg-icon icon="存折" :width="32" :height="32" background="#fff" :box-width="32" :box-height="32" />
                </view>
                <view class="title-box">
                  <span> 不关联账户 </span>
                </view>
              </view>
              <view>

              </view>
            </view>
          </div>
        </li>

        <li v-for="item in list">
          <div class="account-item" @click="e=>finishChoose(item)">
            <view :class="'box-border' + ( $store.state.account.accountInfo.name!==item.name?'':' box-border-choose' )">
              <view class="left-side">
                <view class="icon-box">
                  <svg-icon :icon="item.name" :width="32" :height="32" background="#fff" :box-width="32" :box-height="32" />
                </view>
                <view class="title-box">
                  <span> {{item.name}} </span>
                </view>
              </view>
              <view class="right-side">
                {{item.value}}
              </view>
            </view>
          </div>
        </li>
      </ul>

      <view class="footer">

        <view class="column">

          <view class="button" @click="openAddAccountPage">添加账户</view>
        </view>
        <view class="column">

          <view class="button" @click="openSettingPage"> 设置</view>
        </view>

      </view>

    </view>

  </view>
</template>

<script>
import SvgIcon from "@/pages/svg-icon.vue";

export default {
  components: {SvgIcon},
  data() {
    return {
      show:false,
      list:[
        { name:'支付宝',value:3000 },
        { name:'微信',value:-878.36 },
        { name:'农业银行', value:-6610.2},
        { name:'工商银行', value:85033.14},
        { name:'建设银行', value:Math.floor(Math.random()*100000)/100},
        { name:'杭州银行', value:170000},
        { name:'招商银行', value:4211.2},
        { name:'中国银行', value:5005},
        { name:'交通银行', value:3002},
        { name:'光大银行', value:2000},
        { name:'中信银行', value:1008},
        { name:'浦发银行', value:110},
        { name:'广发银行', value:170000},
        { name:'其他银行', value:170000},

      ],
    }
  },
  props: {},
  methods: {
    finishChoose(item){
      this.$store.dispatch("UPDATE_ACCOUNT", item).then(res=>{
        this.show = false
      });

    },
    openAddAccountPage(){
      this.$store.dispatch('ENTER_ADD_ACCOUNT_CHOOSE_LIST_PAGE')
      // this.$modal.showToast('添加账户模块建设中~')
    },
    openSettingPage(){

      this.$modal.showToast('设置模块建设中~')
    },
    close(){
      this.show = false;
    },
    open(){
      this.show = true;
    },
  },
  onLoad(event) {

  }
}
</script>
<style scoped>
.account-chooser {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;

  display: flex;
  flex-direction: column;


}

.nothing{
  flex: 1;
}
.account-detail{

  height: 400px;

  overflow-y: scroll;
  background: white;
  display: flex;
  flex-direction: column;

  border-radius: 10px 10px 0 0;
  //overflow: hidden;

}
.account-header-fixed{
  position: fixed;
  height: 50px;
  width: 100%;
  background: white;
  border-radius: 10px 10px 0 0;
}
.account-header{
  //background: red;
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.header-title{

}
.left{
  margin-left: 20px;
}
.close{
  margin-right: 20px;

}
.account-detail ul{
  margin: 50px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.account-detail ul li{
  flex: 1;
  //width: 100%;

}
.account-item{
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 54px;
  justify-content: space-between;
  align-items: center;
  background: #fff;

}
.account-item .box-border{
  display: flex;
  flex-direction: row;
  height: 50px;
  flex: 1;
  align-items: center;
  margin: 0 8px 0 8px;
  border-radius: 4px;
  justify-content: space-between;
}
.box-border .left-side{
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;

}
.box-border .right-side{


}

.box-border-choose{
  background: #eee;

}

.box-border .icon-box{

  margin-left: 8px;
}
.box-border  .title-box{
  margin-left: 8px;

}
.footer{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.footer .column{
  flex: 1;
  //background: red;
}

.footer .column .button{
  flex: 1;
  min-width: 20px;
  height: 36px;
  line-height: 36px;
  background: rgb(247,247,247);
  border: 1px solid rgb(253,253,253) !important;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  outline: none;
}

.footer .column .button:first-child{

  margin: 16px 20px 20px 40px;
}
.footer .column .button:last-child{
  margin: 16px 40px 20px 20px;

}




</style>
